<template>
  <div>
    <!-- 吸顶 -->
    <van-sticky>
      <header class="head" style="background:#fff">
        <!-- 左中右，依次为logo图片 输入框 登录框 -->
        <div class="logo"></div>
        <van-search autofocus v-model="inputBoxValue" placeholder="搜索商品" />
        <van-button type="default" size="small">登录</van-button>
      </header>

      <!-- 导航栏 标签页 -->

      <van-tabs swipeable title-active-color="#ee0a24">
        <van-tab v-for="(item, index) in navlist" :title="item" :key="index">
        </van-tab>
      </van-tabs>
    </van-sticky>

    <!-- 轮播图 -->
    <van-swipe class="slideWarp" :autoplay="2000" indicator-color="white">
      <van-swipe-item v-for="(item, index) in swipeObj" :key="index">
        <img :src="item" alt="" />
      </van-swipe-item>
    </van-swipe>

    <!-- 轮播图下面的广告 使用layout布局 -->
    <van-row class="gg_box">
      <van-col><i class="gg_icon_1"></i><span>网易自营品牌</span></van-col>
      <van-col><i class="gg_icon_2"></i><span>30天无忧退货</span></van-col>
      <van-col><i class="gg_icon_3"></i><span>48小时快速退款</span></van-col>
    </van-row>

    <!-- 九宫格Grid -->
    <van-grid :column-num="5" :border="false">
      <van-grid-item
        v-for="(item, index) in icon_img"
        :key="index"
        :icon="item.path"
        :text="item.text"
      />
    </van-grid>

    <!-- 类目热销榜 -->
    <div class="bigBox">
      <h1>类目热销榜</h1>
      <div class="goods_box">
        <div class="left">
          <!-- 左边的盒子 -->
          <div class="left_text">
            <span>居家生活榜</span>
          </div>
          <div class="left_img"></div>
        </div>
        <div class="right">
          <!-- 右边的盒子 -->
          <div class="right_text">
            <span>服饰鞋包榜</span>
          </div>
          <div class="right_img"></div>
        </div>
      </div>
      <!-- 小图片列表 -->
      <van-grid :border="false" :column-num="4" class="small_">
        <van-grid-item
          v-for="(item, index) in small_img"
          :key="index"
          class="padding_small"
        >
          <div class="smallBox">
            <span>{{ item.text }}</span>
            <img :src="item.path" alt="" />
          </div>
        </van-grid-item>
      </van-grid>

      <!-- footer内容 -->
      <div class="footer">
        <h1>底部</h1>
      </div>
    </div>

    <!-- 底部吸附固定栏 -->
    <footer_bar></footer_bar>
  </div>
</template>

<script>
import footer_bar from './footer_bar.vue';
export default {
  components: { footer_bar },
  data() {
    return {
      inputBoxValue: "",
      // 导航栏标签页链接
      navlist: [],
      // 轮播图
      swipeObj: [
        "https://yanxuan.nosdn.127.net/2044433855b75fd5ca398a7b5a2a39f9.jpg?type=webp&imageView&quality=75&thumbnail=750x0",
        "https://yanxuan.nosdn.127.net/ecc100dfa16297236e262fdd47e7c6e3.jpg?type=webp&imageView&quality=75&thumbnail=750x0",
        "https://yanxuan.nosdn.127.net/3863da38d02fe0879fd2fad5a4c82359.jpg?type=webp&imageView&quality=75&thumbnail=750x0",
        "https://yanxuan.nosdn.127.net/31307c24c668ca2ecfecc6a7c1e5caa5.jpg?type=webp&imageView&quality=75&thumbnail=750x0",
        "https://yanxuan.nosdn.127.net/9c2d7edb40908d34648f876638d6d781.jpg?type=webp&imageView&quality=75&thumbnail=750x0",
        "https://yanxuan.nosdn.127.net/f9beb4355d923569677eacb891a30adf.jpg?type=webp&imageView&quality=75&thumbnail=750x0",
        "https://yanxuan.nosdn.127.net/4280595cc92e34f7b313f581c0af8cfc.jpg?type=webp&imageView&quality=75&thumbnail=750x0",
      ],
      // 九宫格的图片
      icon_img: [
        {
          path: "https://yanxuan.nosdn.127.net/c6fd8835a6400b7da7a016ad85506b69.png",
          text: "新品首发",
        },
        {
          path: "https://yanxuan.nosdn.127.net/fede8b110c502ec5799702d5ec824792.png",
          text: "居家生活",
        },
        {
          path: "https://yanxuan.nosdn.127.net/896a3beac514ae8f40aafe028e5fec56.png",
          text: "服饰鞋包",
        },
        {
          path: "https://yanxuan.nosdn.127.net/37520d1204a0c55474021b43dac2a69e.png",
          text: "美食酒水",
        },
        {
          path: "https://yanxuan.nosdn.127.net/6c3bd9d885c818b1f73e497335a68b47.png",
          text: "个护清洁",
        },
        {
          path: "https://yanxuan.nosdn.127.net/559d2a240ec20b096590a902217009ff.png",
          text: "母婴亲子",
        },
        {
          path: "https://yanxuan.nosdn.127.net/5c088559ebcc3f0ffcda663f04dfbeb2.png",
          text: "运动旅行",
        },
        {
          path: "https://yanxuan.nosdn.127.net/fbca8e1f2948f0c09fc7672c2c125384.png",
          text: "数码家电",
        },
        {
          path: "https://yanxuan.nosdn.127.net/f7281169d4e82d5d8d52aa1fec83fe01.png",
          text: "全球特色",
        },
        {
          path: "https://yanxuan.nosdn.127.net/12e8efd15b9b210ab156a7ee9b340548.gif",
          text: "好货抄底",
        },
      ],

      // 小图
      small_img: [
        {
          path: "https://yanxuan-item.nosdn.127.net/9112e1ae43a830d457c5e9757291ed53.png?quality=75&type=webp&imageView&thumbnail=200x200",
          text: "美食酒水榜",
        },
        {
          path: "https://yanxuan-item.nosdn.127.net/ecef155d279e1a485b4f31f87daa3698.png?quality=75&type=webp&imageView&thumbnail=200x200",

          text: "个护清洁榜",
        },
        {
          path: "https://yanxuan-item.nosdn.127.net/71a0cb78786291e04dc49323f69662b0.png?quality=75&type=webp&imageView&thumbnail=200x200",

          text: "数码家电榜",
        },
        {
          path: "https://yanxuan-item.nosdn.127.net/3711e2b5854c5fee2be44eb742752097.png?quality=75&type=webp&imageView&thumbnail=200x200",

          text: "严选全球榜",
        },
        {
          path: "https://yanxuan-item.nosdn.127.net/74662d24f6d217b520178c5a6d031457.png?quality=75&type=webp&imageView&thumbnail=200x200",

          text: "母婴亲子榜",
        },
        {
          path: "https://yanxuan-item.nosdn.127.net/ef41a8006bd9570ed76df11b4c02bc45.png?quality=75&type=webp&imageView&thumbnail=200x200",
          text: "运动旅行榜",
        },
      ],
    };
  },
  created() {
    this.$axios.get("/navlist").then((res) => {
      this.navlist = res.data;
      console.log(res.data);
    });
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.head {
  /* 使用弹性布局，使得盒子水平居中对齐 */
  display: flex;
  justify-content: center;
  align-items: center;
  height: 0.75rem;
}
.logo {
  width: 1.2rem;
  height: 0.4rem;
  background: url("../assets/images/xuebi.png") no-repeat;
  background-size: 3rem, 3rem;
  background-position: -0.92rem -1.94rem;
  margin-left: 0.2rem;
  /* flex: 1; */
  /* border: solid 1px #eee; */
}
.van-search {
  flex: 1;
  height: 100%;
  padding: 0;
  padding: 0 0.2rem;
}
.van-search__content {
  border-radius: 0.08rem;
  background-color: #ededed;
}
.van-button {
  /* height: 100%; */
  margin-right: 0.2rem;
  border-radius: 0.08rem;
  color: red;
}
.van-button--small {
  width: 0.67rem;
  height: 0.35rem;
  font-size: 0.25rem;
  line-height: 0.35rem;
}
.van-button--default {
  border: solid 1px red;
}
.van-tabs {
  border-bottom: solid 1px #d9d9d9;
}
.slideWarp {
  height: 3.18rem;
}
img {
  width: 100%;
}
.gg_box {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.18rem 0.1rem;
}
.gg_box .van-col {
  display: flex;
  justify-content: center;
  align-items: center;
}

.gg_box .van-col:nth-child(2) {
  margin: 0 0.15rem;
}
.gg_box span {
  margin: 0;
  padding: 0;
  font-size: 0.24rem;
}
.gg_icon_1 {
  display: inline-block;
  width: 0.27rem;
  height: 0.27rem;
  background: url("../assets/images/gg_03.png") no-repeat;
  background-size: cover;
}
.gg_icon_2 {
  display: inline-block;
  width: 0.27rem;
  height: 0.27rem;
  background: url("../assets/images/gg_02.png") no-repeat;
  background-size: cover;
}
.gg_icon_3 {
  display: inline-block;
  width: 0.27rem;
  height: 0.27rem;
  background: url("../assets/images/gg_01.png") no-repeat;
  background-size: cover;
}
/* 九宫格的padding值 */
/* .van-tabbar {
  border-top: solid 1px #d9d9d9;
}
.van-tabbar-item {
  font-size: 0.2rem;
} */
/* 类目热销榜 */
.bigBox {
  margin-top: 0.1rem;
}
.bigBox h1 {
  margin-top: 0.2rem;
  margin-left: 0.2rem;
  color: #333;
  font-size: 0.26rem;
  padding: 0.1rem 0;
}

.goods_box {
  height: 1.8rem;
  display: flex;
  justify-content: center;
  align-items: center;
  /* background-color: pink; */
  box-sizing: border-box;
  padding: 0 0.2rem;
}
.left {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  background-color: #f9f3e4;
  margin-right: 0.1rem;
}
.left .left_img {
  height: 1.5rem;
  width: 1.5rem;
  background: url("../assets/images/goods_01.jpg") no-repeat;
  background-size: cover;
}
.left .left_text,
.right .right_text {
  font-size: 0.25rem;
  color: #333;
}
.right {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  background-color: #ebeff6;
}
.right .right_img {
  height: 1.5rem;
  width: 1.5rem;
  background: url("../assets/images/goods_02.jpg") no-repeat;
  background-size: cover;
}

/* 小图的样式 */
.small_ {
  box-sizing: border-box;
  padding: 0 0.1rem;
}
.smallBox {
  background-color: #f5f5f5;
  text-align: center;
}
.smallBox span {
  color: #333;
  font-size: 0.2rem;
}
.smallBox img {
  height: 1rem;
  width: 1rem;
  margin-top: 0.2rem;
}
.van-grid .padding_small {
  margin-bottom: 0.1rem;
  padding: 0;
}
.footer {
  height: 2rem;
  background-color: #414141;
  text-align: center;
}
.footer h1 {
  color: #fff;
  font-size: 0.51rem;
}
</style>
